<template>
  <div class="quoteProduct">
    <div class="main">
      <header class="flex-align-center">
        <span class="blueLine"></span>
        <span style="margin-left: 10px">加工费报价单</span>
      </header>
      <div class="div1" v-loading="loading" style="min-height: 300px">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item :name="index" v-for="(item,index) in costFile" :key="index">
            <template slot="title">{{item.name}}</template>
            <div class="div2Con">
              <div class="flex divTop">
                <div class="flex1">名称</div>
                <div class="flex1">金额</div>
                <div class="flex15">属性</div>
              </div>
              <div class="flex justDivCon" v-for="(items,index) in item.rows" :key="index">
                <div class="flex1">{{items.name}}</div>
                <div class="flex1">{{items.amount}}</div>
                <div class="flex15">{{items.attr?items.attr:'--'}}</div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
// import { listRole } from '@/api/system/role'
export default {
  name: 'Input',
  data() {
    return {
      roleList: [],
      activeNames: [0, 1, 2],
      costs: [
        { name: '厂级管理人员费用', state: '工厂', cost: '256.35' },
        { name: '厂级管理人员费用', state: '工厂', cost: '256.35' },
        { name: '厂级管理人员费用', state: '工厂', cost: '256.35' },
        { name: '厂级管理人员费用', state: '工厂', cost: '256.35' },
        { name: '厂级管理人员费用', state: '工厂', cost: '256.35' },
      ],
      costFile: '',
      loading: false
    }
  },
  created() {
    this.getCostThods()
  },
  methods: {
    getCostThods() {
      this.loading = true
      this.$quote.getCost(this.$route.query.id || 0).then((res) => {
        if (res.code == 200) {
          this.costFile = res.data
        } else {
          this.$message.error(res.code + '-' + res.msg)
        }
        this.loading = false
      })
    },

    handleChange(val) {
      console.log(val)
    },
    goCost() {
      this.$router.push({ path: '/quote/quoteProject' })
    },
  },
}
</script>

<style lang="less" >
.quoteProduct {
  width: 100%;
  height: calc(100vh - 84px);
  box-sizing: border-box;
  padding: 16px;
  background-color: #f3f5fa;
  overflow: auto;
  header {
    height: 50px;
    background-color: white;
    color: #666666;
    .blueLine {
      margin-left: 5px;
      height: 20px;
      width: 5px;
      background-color: #246cff;
    }
  }
  .main {
    height: calc(100%);
    width: 100%;
    overflow: scroll;

    .div1 {
      margin-top: 20px;
      .title1 {
        width: 100%;
        height: 35px;
        margin-top: 50px;
        border-bottom: 3px solid rgb(231, 231, 231);
        span {
          font-size: 20px;
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
          font-weight: 700;
          font-style: normal;
          margin-left: 20px;
        }
      }

      .title2 {
        width: 100%;
        height: 35px;
        span {
          font-size: 20px;
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
          font-weight: 700;
          font-style: normal;
          margin-left: 20px;
        }
      }
      .div1Con {
        width: 95%;
        margin-left: 5%;
        margin-top: 15px;
        height: 145px;
        div {
          width: 25%;
          float: left;
          margin-top: 20px;
        }
      }
      .div2Con {
        width: 95%;
        margin-left: 5%;
        margin-top: 10px;
        height: auto;
        .divTop {
          height: 50px;
          font-size: 16px;
          width: 80%;
          .flex1 {
            text-align: center;
          }
          .flex15 {
            text-align: center;
          }
        }
        .justDivCon {
          width: 80%;
          height: 40px;
          .flex1 {
            text-align: center;
          }
          .flex15 {
            text-align: center;
          }
        }
      }
    }
  }
  .el-collapse-item {
    position: relative;
  }
  .el-collapse-item__header {
    font-size: 20px;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    padding-left: 20px;
  }
}
</style>